<i18n>
{
  "en": {
    "required": "Required Product",
    "optional": "Optional Product"
  },
  "zh": {
    "required": "选配产品",
    "optional": "替代产品"
  }
}
</i18n>

<template>
<div>
<el-card >
    <div class="section-header">

      <div class="tab-list" @click="switchTab">
        <div class="tab-item" data-action="required" :class="{ 'active': currentTab === 'required' }">{{$t('required')}}</div>
        <div class="tab-item" data-action="optional" :class="{ 'active': currentTab === 'optional' }">{{$t('optional')}}</div>
      </div>

      <div>
        <el-button @click="doImport">导入</el-button>
        <el-button type="primary" @click="OptionalVisible=true" plain>新增</el-button>
        <el-button type="danger" plain>删除</el-button>
      </div>

    </div>


    <el-table
      border
      :data="dataList"
      style="width: 100%">
       <el-table-column
      type="selection"
      width="55">
    </el-table-column>
      <el-table-column
        prop="date"
        label="Series"
        header-align="center">
      </el-table-column>
      <el-table-column
        prop="name"
        label="产品名称"
        header-align="center">
      </el-table-column>
      <el-table-column
        prop="address"
        label="内部型号"
        header-align="center">
      </el-table-column>
      <el-table-column
        prop="address"
        label="物料号"
        header-align="center">
      </el-table-column>
      <el-table-column v-if="currentTab === 'required'"
        align="center"
        prop="address"
        label="是否必配"
        header-align="center">
      </el-table-column>
    </el-table>
  </el-card>


    <!-- 新增选配产品 -->
    <el-dialog
      :title="'新增选配产品'"
      :close-on-click-modal="false"
      :visible.sync="OptionalVisible"
      top="30px"
      width='60%'
      max-height="300">
      <el-form :inline="true" :model="searchForm" class="search-form">
            <el-row :gutter="30">

              <el-col :xs="24" :sm="12" :md="12" :lg="12">
                <el-form-item>
                  <el-input v-model="searchForm.keyword" placeholder="搜索主型号/内部型号/外部型号-注：全产品库搜索">
                    <i slot="suffix" class="el-input__icon el-icon-search" @click="getDataList()"></i>
                  </el-input>
                </el-form-item>
              </el-col>

              <el-col :xs="24" :sm="12" :md="12" :lg="12">
                <el-form-item >
                  <el-select v-model="searchForm.status" placeholder="选择产品分类">
                    <el-option label="正常销售-CRM取" value="0"></el-option>
                    <el-option label="正常销售" value="1"></el-option>
                    <el-option label="即将停售" value="2"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

            </el-row>

          </el-form>
        <el-table
      border
      :data="dataList"
      style="width: 100%">
       <el-table-column
      type="selection"
      width="55">
    </el-table-column>
      <el-table-column
        prop="date"
        label="Series"
        header-align="center">
      </el-table-column>
      <el-table-column
        prop="name"
        label="产品名称"
        header-align="center">
      </el-table-column>
      <el-table-column
        prop="address"
        label="内部型号"
        header-align="center">
      </el-table-column>
      <el-table-column
        prop="address"
        label="物料号"
        header-align="center">
      </el-table-column>
      <el-table-column v-if="currentTab === 'required'"
        align="center"
        prop="address"
        label="是否必配"
        header-align="center">
        <template slot-scope="scope">
          <el-checkbox></el-checkbox>
      </template>
      </el-table-column>
    </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click.prevent="OptionalVisible = false">{{$t('common.ok')}}</el-button>
        <el-button type='danger' @click="OptionalVisible = false">{{$t('common.cancel')}}</el-button>
      </span>
    </el-dialog>

    <!-- 导入 -->
    <el-dialog
      class="import-dialog"
      :title="currentImport.title"
      :close-on-click-modal="false"
      :visible.sync="importVisible"
      width='40%'>
        <Import :data="currentImport"/>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click.prevent="importVisible = false">{{$t('common.ok')}}</el-button>
        <el-button type='danger' @click="importVisible = false">{{$t('common.cancel')}}</el-button>
      </span>
    </el-dialog>

</div>

</template>

<script>
  import Import from '../import'
  export default {
    data() {
      return {
        // 导入dialog
        importVisible:false,
        currentImport: {
          title: 'TODO',
          type: 'batch_import', // todo
          template: 'http://cslibrary.stanford.edu/102/PointersAndMemory.pdf' // TODO
        },

        // 查询表单
        searchForm: {
          keyword: '',
          line: '0',
          serial: '',
          status: '' // all
        },

        OptionalVisible: false,

        currentTab: 'required',

        // 表格加载状态
        dataListLoading: false,
        // 表格数据
        dataList: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '是'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '否'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '是'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '否'
          }],
        // currentPage: 1,
        // pageSize: 10,
        // totalPage: 0,
      };
    },
    components: {
      Import
    },
    created() {
    },
    computed: {

    },
    methods: {
      doImport() {
        this.importVisible = true;
      },
      getDataList() {

      },
      switchTab({ target }) {
        const action = target.getAttribute('data-action') || target.parentElement.getAttribute('data-action');
        switch (action) {
          case 'required':
            this.currentTab = action
            break;
          case 'optional':
            this.currentTab = action
            break;
        }
      },

    }
  }
</script>

<style scoped>

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

  .tab-list {
    display: flex;
    font-size: 14px;
    color: #666;
  }

  .tab-item {
    padding: 5px 0;
    cursor: pointer;
     margin-right: 20px;
  }

.search-form >>> .el-form-item {
    display: flex;
    width: 100%;
  }
  .search-form .el-form-item >>> .el-form-item__content {
     width: 100%;
  }
  .search-form .el-form-item >>> .el-select {
    width: 100%;
  }
</style>
